<template>
  <el-dialog
    v-model="visible"
    title="目标完成详情"
    width="800"
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-table
      :data="form.goods_target_config_detail"
      height="300"
      style="width: 100%"
      highlight-current-row
      :header-cell-style="{
        color: '#333333',
        background: '#F6FAFF',
      }"
      border
      ref="multipleTableRef"
      :row-class-name="rowClassName"
    >
      <el-table-column
        prop="user_or_depart_text"
        label="目标部门"
        v-if="form.dimensionality == 2"
      >
      </el-table-column>
      <el-table-column
        prop="user_or_depart_text"
        label="目标人员"
        v-if="form.dimensionality == 1"
      >
      </el-table-column>
      <el-table-column
        prop="last_category_text"
        label="目标分类"
        v-if="form.dimensionality == 3"
      >
      </el-table-column>

      <el-table-column prop="target_value" label="完成情况">
        <template #default="{ row }">
          <div>
            <span class="base-red-color">{{ row.finish_value }}</span> /
            {{ row.target_value }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="target_manage_text" label="目标负责人"> </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const emits = defineEmits(["query"]);

const data = reactive({
  form: {},
  visible: false,
  loading: false,
  formRef: null,
});

const { form, visible } = toRefs(data);
const open = async (row) => {
  form.value = row;
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

defineExpose({ open });
</script>
<style lang="scss"></style>
